<template>
  <div class="box">
    <!-- 搜索 -->
    <div class="search">
      <div class="leftimg" @click="a1">
        <img src="../../../public/img/消息图标.png" alt="" />
      </div>

      <van-search v-model="value" placeholder="请输入搜索关键词" to="/search" />

      <div class="rightimg" @click="jump">
        <img src="../../../public/img/组.png" alt="" />
      </div>
    </div>

    <!-- 滚动导航 -->
    <div class="nav">
      <van-tabs v-model:active="active" :swipeable="false" :replace="false">
        <van-tab
          v-for="(item, index) in state.list"
          :title="item.item"
          :key="index"
          :to="item.route"
        >
          <router-view />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const jump = () => {
      router.push("/sign");
    };
    const a1 = () => {
      router.push("/news");
    };
    const active = ref(0);
    const value = ref("");
    const state = reactive({
      list: [
        { route: "/home/index/recommend", item: "推荐" },
        { route: "/home/index/teach", item: "音乐剧" },
        { route: "/home/index/voice", item: "李蕾慢读" },
        { route: "/home/index/recommend", item: "非凡精读" },
        { route: "/home/index/teach", item: "课程" },
        { route: "/home/index/voice", item: "训练营" },
        { route: "/home/index/recommend", item: "声音局" },
        { route: "/home/index/teach", item: "樊登讲书" },
        { route: "/home/index/voice", item: "李蕾慢读" },
      ],
    });

    return { value, state, active, jump, a1 };
  },
};
</script>

<style lang="less" scoped>
.box {
  background: #fff;
  .search {
    display: flex;
    position: fixed;
    top: 0;
    z-index: 999;
    padding-top: 20px;
    justify-content: space-around;
    align-items: center;
    background: #fff;
    width: 100%;
    padding-bottom: 11px;
    padding-left: 15px;
    padding-right: 18px;
    .leftimg {
      width: 18px;
      height: 18px;
      margin-left: 6px;
      img {
        width: 18px;
        height: 18px;
        display: block;
      }
    }
    .van-search {
      width: 287px;
      height: 25px;
    }
    /deep/.van-search__content {
      padding-left: 10px;
      border: 1px solid #666;
      border-radius: 20px;
      height: 25.5px;
      background: #fff;
    }
    /deep/.van-cell {
      padding: 0px;
    }
    .rightimg {
      width: 25px;
      height: 25px;
      margin-right: 5px;
      img {
        width: 25px;
        height: 25px;
        display: block;
      }
    }
  }
  .nav {
    padding-top: 90px;
    /* position: fixed; */
    /deep/.van-tabs__wrap {
      position: fixed;
      z-index: 998;
      top: 45px;
    }
    .van-tabs--line {
      /* height: 90px !important;
      display: flex;
      align-items: center;
      font-family: PingFang SC; */
      /deep/.van-tab__text {
        font-size: 15px;
        line-height: 15px;
        padding-bottom: 5px;
      }
      /deep/.van-tab--active {
        color: black;
        font-weight: bold;
      }
      /deep/.van-tabs__line {
        background: #f8d410;
        width: 21px;
        height: 5px;
        border-radius: 3px;
      }
      /deep/.van-tabs__content {
        margin-top: 10px;
      }
    }
  }
}
</style>
